;
(function () {
    // 姝ラ1锛氬垱寤篹charts瀹炰緥
    let myChart = echarts.init(document.querySelector('.echarts4'))

    // 姝ラ2锛氬畾涔夐厤缃紙鎸囧畾鍥捐〃鐨勯厤缃」鍜屾暟鎹級
    let option = {
        grid: {
            left: 15,
            right: 20,
            top: 20,
            bottom: 0,
        },
        xAxis: [{
            show: false
        }],
        yAxis: [{
                axisLine: 'none',
                axisLabel: {
                    verticalAlign: 'bottom',
                    align: 'left',
                    padding: [0, 0, 15, 10],
                    textStyle: {
                        color: '#fff',
                        fontSize: '14'
                    }
                },
                data: ['1 蜜雪冰城', '2 蜜雪冰城', '3 蜜雪冰城', '4 蜜雪冰城', '5 蜜雪冰城'],
                inverse: true
            },
            {
                axisLine: 'none',
                data: ['314,529,403.31', '314,529,403.31', '314,529,403.31', '314,529,403.31', '314,529,403.31'],

                axisLabel: {
                    verticalAlign: 'bottom',
                    align: 'right',
                    padding: [0, 10, 15, 0],
                    textStyle: {
                        color: '#282828',
                        fontSize: '14'
                    },
                    formatter: function (value) {
                        // return '{x|' + value + '%' + '}'
                        return '{x|' + value + '}'
                    },
                    rich: {
                        x: {
                            color: '#ccc',
                            fontSize: 14
                        }
                    }
                }
            },
            {
                axisLine: 'none',
                data: []
            }
        ],
        series: [{
                type: 'bar',
                data: [70, 30, 20, 60, 80],
                barWidth: 8,
                itemStyle: {
                    normal: {
                        color: {
                            colorStops: [{
                                    offset: 0,
                                    color: "rgb(255, 128, 0)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(200, 106, 255, 0.8)",
                                },
                            ],
                        },
                    }
                },
            },
            {
                type: 'bar',
                yAxisIndex: 2,
                data: [100, 100, 100, 100, 100],
                barWidth: 8,
                itemStyle: {
                    normal: {
                        color: '#504778'
                    }
                },
                z: 0,
            }
        ]
    };

    // 姝ラ3锛氫娇鐢ㄥ垰鎸囧畾鐨勯厤缃」鍜屾暟鎹樉绀哄浘琛�
    myChart.setOption(option)

    // 姝ラ4锛氱洃鎺х綉椤佃鍙�
    window.addEventListener('resize', () => {
        myChart.resize()
    })
})()